import React from 'react'
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import styles from "../../css/task.module.css";
import { Debt, Common } from "../../const/imgs";
import Config from "../../Config";
import SelectorBottom from '../components/SelectorBottom'
import { MyButton,MyButtonYz } from '../../view/MyButton'
import Textarea from '../components/TextArea'
import { delayRemind,delayApply } from '../../service/TaskService'
import { getTOKEN,getIDs } from '../../utils/StorageUtil'
import { back } from '../../utils/LocationUtil';
import { HintDialog } from '../../view/Dialog'
class PutOff extends React.Component {
  constructor(props) {
    super(props)
    this.timer = null
    this.remainTime = null
    this.state={
      remainTime:null
    }
  }
  componentDidMount() {
    const { status,last_delay_status, last_remind_time } = this.props.TaskData.task_info
    let isRemind
    if (parseInt(last_delay_status) === 1) {
      document.title = '审批中';

      this.remainTime = 3600- (parseInt(new Date().getTime() / 1000) - last_remind_time)
      if (this.remainTime <0) {
        isRemind = true
      } else {
        isRemind = false
        this.count()
      }
      this.setState({
        isRemind: isRemind
      })
    } else {
      document.title = '申请延期'
    }
   
  }
  // 计时
  count = () => {
    const that = this
    let minute, second
    this.timer = setInterval(() => {
      minute = parseInt(this.remainTime / 60)
      second = this.remainTime % 60
      if(this.remainTime === 0){
        clearInterval(this.timer)
        this.setState({
          isRemind: true
        })
        return
      }
      this.setState({
        remainTime: '00:' + minute + ':' + second
      })      
      this.remainTime--
    }, 1000)
  }
  componentWillUnmount(){
    clearInterval(this.timer)
  }
  // 选择日期
  getSelectedDate = (e) => {
    this.setState({
      delay_time: e.date.value
    })
  }
  // 获得补充
  getRemark = (e) => {
    this.setState({
      remark: e
    })
  }
  confirm = () => {
    const params = {
      token: getTOKEN(),
      task_id: this.props.taskId?this.props.taskId:getIDs().taskId,
      current_end_time: this.props.TaskData.task_info.end_time,
      delay_time: this.state.delay_time,
      remark: this.state.remark
    }
    delayApply(params)
      .then(
        res => {
          console.log(res)
          if (res.error_code === 0) {
            this.refs.remind.setState({
              content: '已提交',
              visibility: true
            });
          }
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  remind = () => {
    const params = {
      token: getTOKEN(),
      task_id: this.props.taskId?this.props.taskId:getIDs().taskId,
    }
    const that = this
    if(this.state.isRemind){
      this.setState({
        isRemind: false
      })
      delayRemind(params)
        .then(
          res => {
            if (res.error_code === 0) {
              that.refs.remind.setState({
                content: '已提醒',
                visibility: true
              });
            }
          }
        )
        .catch(
          err => {
            console.log(err)
          }
        )
    }
  }  
  render() {
    const {
      delay_time, //延期时间
      status,   // 任务状态
      repay_amount,    // 已回款金额
      received_rwd,    // 已获得奖励
      start_time, // 任务开始时间
      end_time,    // 任务结束时间
      last_delay_status, // 最后申请延期状态 null(未申请过延期) 1(申请中) 2(已同意) 3(未通过)
      last_remind_time, // 上次提醒时间
      remark, // 备注
    } = this.props.TaskData.task_info
    return (
      <div className={styles['home']} style={{ paddingTop: '10px' }} >
        <div className={styles['debt_item']} style={{ color: Config.fontColor }} >

          <div className={styles['debt_method']} style={{ marginBottom: '10px', lineHeight: '50px', padding: '0 15px' }} >
            <CaseItem name='当前催收截止日期： ' value={start_time} />
            <CaseItem name='委托方委托截止日期：' value={end_time} />
            {parseInt(last_delay_status) === 1 && <CaseItem name='委托期延长至' value={delay_time} />}
            {parseInt(last_delay_status) !== 1 && <div style={{ margin: '0 -15px', height: '50px', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
              <SelectorBottom getSelected={this.getSelectedDate} type={'date'} name='委托期延长至' des="请选择" />
            </div>}
          </div>
        </div>
        <div className={styles['debt_data']} >
          <div className={styles['debt_title']}
            style={{
              color: Config.fontColor,
            }}
          >
            <div style={{
              width: '100%',
              height: '100%',
              display: 'flex',
              alignItems: 'center',
              borderBottom: '0.5px solid #eee',
            }}>
              <span className={styles['debt_value']}>  备注    </span>

            </div>
          </div>
          <div className={styles['debt_data_list']}>

            {parseInt(last_delay_status) !== 1 && <Textarea
              onChange={this.getRemark}
              placeholder='请在此处填写'
            />}
            {parseInt(last_delay_status) === 1 && <div>
              {remark}
            </div>}
          </div>
        </div>
        <div className={styles['btn_wrapper']} style={{ padding: '100px 0', flexDirection:'column',alignItems:'center' }}>
          {parseInt(last_delay_status) !== 1 && <MyButton
            style={{
              width: '80%',
              borderRadius: '0.3rem'
            }}
            name={"确认提交"}
            onClick={() => {
              this.confirm();
            }}
          />}
          {parseInt(last_delay_status) === 1 &&
           <MyButtonYz
            style={{
              width: '80%',
              borderRadius: '0.3rem',
            }}
            disable={!this.state.isRemind}
            name={"提醒管理员"}
            onClick={() => {
              this.remind();
            }}
          />}
          {parseInt(last_delay_status) === 1 && !this.state.isRemind &&
          <div style={{fontSize:'12px',color:'#999999',marginTop:'20px'}}>
          已发送提醒，{this.state.remainTime}后可再次提醒
          </div>
          }
           <HintDialog
          ref="remind"
          style={{
            color: "#fff"
          }}
          // visibility={this.state.alertMsg !== ""}
          // content={this.state.alertMsg}
          operateText="确定"
          operateClick={() => { back() }}
        />
        </div>
      </div>
    )
  }
}

const CaseItem = ({ name, value, isNext, navigate }) => {
  return (

    <div className={styles['debt_data_method']}>
      <span className={styles['debt_value']}> {name}     </span>
      <span
        className={styles['debt_key']}
        onClick={navigate}
      > {value}
        {isNext &&
          <img src={Debt.YJT} style={{ width: '7px', marginLeft: '5px' }} />

        }
      </span>
    </div>
  )
}
const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};
const mapDispatchToProps = dispatch => {
  return {
    taskTab(item) {
      let params = {
        taskTabIndex: item.taskTabIndex
      };
      dispatch(Actions.actionTaskTab(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(PutOff);